<template>
  <div>
    <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          @keyup.native.enter="submit"
          v-model="names"
          placeholder="请输入关键字"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="userData.result" style="width: 100%">
      <el-table-column fixed label="学员照片" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.user_cover" width="100px" />
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="姓名"> </el-table-column>
      <el-table-column prop="user_sex" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.user_sex == 1">男</span>
          <span v-if="scope.row.user_sex == 0">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="user_phone" label="联系方式"> </el-table-column>

      <el-table-column prop="user_text" label="个人简介"> </el-table-column>

      <el-table-column prop="License_type" label="驾照类型"> </el-table-column>

      <el-table-column prop="city_name" label="城市"> </el-table-column>

      <el-table-column label="操作" width="260px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="$router.push('/home/user-update/' + scope.row.user_id)"
            >编辑</el-button
          >
          <el-button size="mini" type="primary">查看错题</el-button>
          <el-button size="mini" type="danger" @click="det(scope.row)"
            >删除</el-button
          >
        </template> </el-table-column
      >>
    </el-table>
    <el-pagination
      style="margin: 10px"
      background
      :total="userData.total"
      :page-size="userData.pagesize"
      :current-page="userData.page"
      layout="->, total, prev, pager, next, jumper"
      @current-change="changeCurrentPage"
    ></el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      // 学员列表数据
      names: "",
      userData: {
        page: 1,
        pagesize: 10,
        total: 0,
        result: [],
      },
    };
  },
  methods: {
    // 学员名称模糊查询
    submit() {
      this.userData.page = 1;
      this.search();
    },
    infoUser() {
      let params = {
        page: this.userData.page,
        pagesize: this.userData.pagesize,
      };
      httpApi.userApi.queryall(params).then((res) => {
        console.log("加载用户列表", res);

        this.userData.result = res.data.data.result;
        this.userData.total = res.data.data.total;
        console.log(res.data.data.result.user_sex);
        if (res.data.data.result.user_sex == 0) {
          this.userData.result.user_sex = "男";
        } else {
          this.userData.result.user_sex = "女";
        }
      });
      // this.userData.result.forEach(item=>{return item.License_type=item.License_type.join('/')})
    },
    search() {
      if (this.names.trim()) {
        this.queryUserByName();
      } else {
        this.infoUser();
      }
    },
    queryUserByName() {
      let params = {
        phonename: this.names,
        page: this.userData.page,
        pagesize: this.userData.pagesize,
      };
      httpApi.userApi.queryByNameLike(params).then((res) => {
        console.log("模糊查询用户", res);
        this.userData.result = res.data.data.result;
        this.userData.total = res.data.data.total;
      });
    },
    changeCurrentPage(page) {
      this.userData.page = page; // 修改当前页
      this.search();
    },
    det(user) {
      this.$confirm("是否删除该教练信息", "提示", {
        ConfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        httpApi.userApi.del({ user_id: user.user_id }).then((res) => {
          if (res.data.code == 200) {
            console.log("删除用户", res);
            this.search();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },
  },

  mounted() {
    this.infoUser();
  },
};
</script>

<style lang="scss" scoped></style>
